<template>
  <div class="wrapper">
    <!-- 商品详情轮播图 -->
    <div class="goods-banner">
      <swiper :options="bannerOption">
        <swiper-slide v-for="(item, index) in goodsBanner" :key="index">
          <img :src="item.path" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <!-- 商品名称价格活动 -->
    <div class="goods-brief">
      <div class="gbt">
        <div class="gbtl">
          <h2>{{goodsBrief.goods_name}}</h2>
          <div class="price" v-if="goodsBrief.is_activity">
            <strong>{{goodsBrief.is_activity.activity_price | moneyBefore}}</strong><span>.{{goodsBrief.is_activity.activity_price | moneyAfter}}</span><em>积分</em>
            <s v-if="goodsBrief.is_activity.activity_type === '00'">{{goodsBrief.price}}积分</s>
          </div>
          <div class="price" v-else>
            <strong>{{goodsBrief.price | moneyBefore}}</strong>.<span>{{goodsBrief.price | moneyAfter}}</span><em>积分</em>
          </div>
        </div>
        <div class="btn-collect">
          <i class="iconfont">&#xe618;</i><span>收藏</span>
        </div>
      </div>
      <div class="goods-activity" v-if="goodsBrief.is_activity">
        <div class="title">活动</div>
        <!-- 秒杀 00 -->
        <div class="spike" v-if="goodsBrief.is_activity.activity_type === '00'">
          <div class="countdown">
            <div class="time">01</div>
            <div class="separator">:</div>
            <div class="time">34</div>
            <div class="separator">:</div>
            <div class="time">52</div>
            <div class="text">后结束</div>
          </div>
        </div>
        <!-- 满减 03 -->
        <div class="full-reduction" v-if="goodsBrief.is_activity.activity_type === '03'">
          满<span>{{goodsBrief.is_activity.all_price}}</span>
          立减<span>{{goodsBrief.is_activity.cut_price}}</span>
        </div>
      </div>
    </div>
    <!-- 商品选项 -->
    <div class="goods-select">
      <div class="goods-select-item">
        <label>送至</label>
      </div>
    </div>
    <!-- 商品详情说明 -->
    <div class="goods-detail">
      <div class="title">商品介绍</div>
      <div class="goods-content" v-html="goodsHtml"></div>
    </div>
  </div>
</template>
<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import {toast} from '@/libs/toast'
export default {
  created () {
    this.getGoodsDetail(this.$route.params.id)
  },
  data () {
    return {
      skuId: null,
      bannerOption: {
        lazy: true,
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true
        },
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        }
      },
      goodsBanner: {},
      goodsBrief: {},
      goodsDetail: {}
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  computed: {
    goodsHtml () {
      let originHtml = this.goodsDetail.introduction
      if (originHtml) {
        originHtml = originHtml.replace(/<img/g, '<img style="width:100%;height:auto;display:block"')
      }
      return originHtml
    }
  },
  filters: {
    moneyBefore (value) {
      if (value) return value.split('.')[0]
    },
    moneyAfter (value) {
      if (value) return value.split('.')[1]
    }
  },
  methods: {
    getGoodsDetail (id) {
      this.$reqGet('Goods/goodsGetDetail?sku=' + id)
        .then(json => {
          if (json.error === '00') {
            this.goodsBanner = json.goods.album[0].data
            this.goodsBrief = json.goods.goods
            this.goodsDetail = json.goods.content
          } else {
            toast(json.message)
          }
        })
    }
  }
}
</script>
<style lang="less" scoped>
.goods-banner{
  background: @white;
}
.swiper-slide{
  width: 750*@rex;
  height: 750*@rex;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  img{
    max-width: 100%;
    max-height: 100%;
    display: block;
  }
}
.goods-brief{
  padding: 20*@rex;
  background: @white;
  border-bottom: 1*@rex solid #ddd;
  .gbt{
    display: flex;
    align-items: center;
  }
}
.gbtl{
  flex: 1;
  h2{
    font-size: 32*@rex;
    line-height: 40*@rex;
    color: @text-black;
    word-break: break-all;
    margin-right: 20*@rex;
  }
  .price{
    color: @text-red;
    strong{
      font-size: 56*@rex;
      font-weight: normal;
    }
    span{
      font-size: 44*@rex;
    }
    em{
      color: @text-gray;
      font-size: 28*@rex;
      font-style: normal;
      margin-left: 10*@rex;
    }
    s{
      font-size: 24*@rex;
      color: @text-gray;
    }
  }
}
.btn-collect{
  text-align: center;
  color: @text-gray;
  i{
    font-size: 44*@rex;
    display: block;
  }
  span{
    font-size: 28*@rex;
    display: block;
    margin-top: 6*@rex;
  }
}
.goods-activity{
  display: flex;
  margin-top: 10*@rex;
  font-size: 24*@rex;
  background: @text-red;
  color: @white;
  .title{
    padding: 10*@rex 20*@rex;
    border-right: 2*@rex dashed @white;
  }
  .full-reduction{
    padding: 10*@rex 20*@rex;
    span{
      color: #ff0;
      margin: 0 10*@rex;
    }
  }
}
.countdown{
  display: flex;
  padding: 10*@rex 20*@rex;
  .time{
    background: #333;
    color: #ff0;
    padding: 2*@rex 5*@rex;
  }
  .separator{
    padding: 0 5*@rex;
  }
  .text{
    margin-left: 10*@rex;
  }
}
.goods-select{
  background: @white;
  border-top: 1*@rex solid #ddd;
  border-bottom: 1*@rex solid #ddd;
  margin-top: 20*@rex;
}
.goods-select-item{
  font-size: @font-normal;
  padding: 20*@rex;
  label{
    color: @text-gray;
  }
}
.goods-detail{
  background: @white;
  margin-top: 20*@rex;
  .title{
    font-size: @font-large;
    padding: 20*@rex 0;
    text-align: center;
    border-top: 1*@rex solid #ddd;
    border-bottom: 1*@rex solid #ddd;
    color: @text-black;
  }
}
.goods-content{
  img{
    width: 100%;
    height: auto;
    display: block;
  }
}
</style>
